<script lang="ts" setup>
import axios, { type SaveImgNum } from "@util/http"

const len = reactive({ en: "0", cn: "0" })
axios.get<any, SaveImgNum>("/imgs").then(res => {
  if (res.status === "success") {
    len.en = formatNum(res.len + 23845)
    len.cn = len.en
  }
}, err => {
  len.en = formatNum(18917335)
  len.cn = len.en
})

function formatNum(num: string | number): string {
  return String(num).split('').reverse().map((v, i) => { if (i % 3 === 0 && i != 0) { return v + ',' }; return v; }).reverse().join('')
}
</script>

<template>
  <div class="foot-box">
    <p class="imgs">{{$t("foot.imgs", len)}}</p>
    <p class="copyright">Copyright © 2022-{{new Date().getFullYear()}} sishen</p>
  </div>
</template>

<style lang="scss">
.foot-box {
  @include center;
  flex-direction: column;

  p:not(:first-child) {
    margin-top: 8px;
  }
}
</style>
